<template>
  <div class="component__collection_card" @click="toPath(detail.id)">
    <div :class="['course', kl_md.KLGL == 1 ? 'gelin-card' : '']">
      <div class="course-left">
        <img v-lazy="detail.iconPath" :key="detail.iconPath" />
      </div>
      <div class="course-right">
        <div class="course-name">{{detail.courseName}}</div>
        <!-- <div class="progress">
              <van-progress :percentage="50" :show-pivot="false"/>
              <div class="percentage">
                  已学习50%
              </div>
          </div> -->
        <!-- <div class="course-btn">开始学习</div> -->
        <!-- <div class="course-btn pick">重新学习</div> -->
				<div class="card_label">
					<!-- <span style="margin-right:.1rem;">#专升本公共科</span> -->
          <template v-if="detail.label">
            <span
              v-for="(item, index) in JSON.parse(detail.label)"
              :key="index"
              style="margin-right:.1rem;"
              >#{{ item }}</span
            >
          </template>
        </div>
				<div class="card-info">
          <div class="card-info-left">
            <img src="/img/mobile/course-hot.png" alt="" />
            <span>{{detail.studentSum}}</span>
            <span style="margin:0 .1rem;">|</span>
            <span>共{{ detail.chapterNum }}课时</span>
          </div>
          <div class="card-info-right">
						<span class="price"
                  ><span class="coursedot">&yen;</span
                  >{{ detail.price }}</span
                >
            <!-- <template
              v-if="!is_show_price && !is_hidden_content && detail.isDiscount && !detail.isFree"
            >
              <div>
                <span class="oldprice"
                  ><span class="coursedot">&yen;</span>{{ detail.price }}</span
                >
                <span class="price"
                  ><span class="coursedot">&yen;</span
                  >{{ detail.discountPrice }}</span
                >
              </div>
            </template>
            <template v-else>
              <div v-if="!is_show_price && !is_hidden_content">
                <span class="price" v-if="detail.isFree">免费</span>
                <span class="price" v-if="!detail.isFree && isMemberFree"
                  ><span class="coursedot">&yen;</span>0.00</span
                >
                <span
                  class="price"
                  v-if="!isMemberFree && !detail.isFree && !is_member"
                  ><span class="coursedot">&yen;</span>{{ detail.price }}</span
                >
                <span
                  class="price"
                  v-if="
                    kl_md.KLHY == 1 &&
                      !isMemberFree &&
                      !detail.isFree &&
                      is_member
                  "
                >
                  <span v-if="user_member && user_member.memberLevel === 0"
                    >会员价￥{{
                      Number(detail.smallMemberPrice).toFixed(2)
                    }}</span
                  >
                  <span v-if="user_member && user_member.memberLevel === 1"
                    >会员价￥{{
                      Number(detail.middleMemberPrice).toFixed(2)
                    }}</span
                  >
                  <span v-if="user_member && user_member.memberLevel === 2"
                    >会员价￥{{
                      Number(detail.highMemberPrice).toFixed(2)
                    }}</span
                  >
                </span>
              </div>
            </template> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["detail"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      member_discount(state) {
        return state.member_discount;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    }
  },
  watch: {},
  methods: {
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    }
  },
  created() {
    console.log(this.detail);
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.component__collection_card {
  width: 6.624rem;
  box-sizing: content-box;
  padding: 0 0.288rem 0;
  .course {
    height: 2.208rem;
    border-bottom: 0.0096rem solid #ededf1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .course-left {
      width: 2.592rem;
      height: 1.728rem;
      background-color: var(--theme-color);
      border-radius: 0.0192rem;
      overflow: hidden;
			img{
				width: 100%;
				height: 100%;
				display: block;
			}
    }
    .course-right {
      width: 3.8rem;
      height: 1.728rem;
      position: relative;
      .course-name {
        font-size: 0.2688rem;
        font-weight: bold;
				height: .7rem;
				line-height: .35rem;
        color: #494a4d;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
			.card_label {
        font-size: 0.26rem;
        line-height: 0.5rem;
        height: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
			.card-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.24rem;
				margin-top: .2rem;
        .card-info-left {
          display: flex;
          align-items: center;
          color: #adafb3;
          img {
            width: .1536rem;
            height: .2208rem;
						margin-right: .05rem;
            display: block;
          }
        }
        .card-info-right {
          // font-size: .34rem;
          font-family: "微软雅黑", arial, "\5b8b\4f53";
          color: var(--theme-color);
          // font-family: -apple-system,BlinkMacSystemFont,Microsoft YaHei UI,Microsoft YaHei,Roboto,Hiragino Sans GB,Source Han Sans CN,Fira Sans,Droid Sans,Helvetica Neue,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
          .coursedot {
            // font-size: .26rem;
            margin-right: 0.06rem;
          }
          .oldprice {
            color: #666;
            position: relative;
          }
          .oldprice::before {
            content: "";
            display: block;
            position: absolute;
            left: -5%;
            top: 50%;
            transform: translateY(-50%);
            width: 110%;
            height: 0.02rem;
            background: #666;
          }
        }
      }
      .progress {
        position: absolute;
        left: 0;
        width: 3.8rem;
        bottom: 0.1rem;
        .percentage {
          font-size: 0.2112rem;
          color: #b7b9bd;
          text-align: right;
          margin-top: 0.1rem;
        }
      }
      .course-btn {
        position: absolute;
        right: 0;
        bottom: 0.1rem;
        width: 1.3056rem;
        height: 0.4608rem;
        font-size: 0.2112rem;
        line-height: 0.4608rem;
        text-align: center;
        color: #ffffff;
        background-color: var(--theme-color);
        border-radius: 0.2304rem;
        &.pick {
          background-color: #f99797;
        }
      }
    }
  }
  .course.gelin-card {
    .course-left {
      width: 1.35338rem;
    }
    .course-right {
      width: 5rem;
    }
  }
}
</style>
<style lang="scss">
.component__collection_card {
}
</style>
